//弹窗提示消息
//  toastr.success("普通提示")
//  toastr.info("成功提示")
//  toastr.warning('警告提示')
//  toastr.error("错误提示")
//需求1：登录注册切换
//获取元素
let qdl = document.querySelector('.register a') //去登录
let qzc = document.querySelector('.login a') //去注册
let login = document.querySelector('.login') //登录
let register = document.querySelector('.register') //注册

//点击去注册，让登录隐藏，注册显示
qzc.onclick = function() {
  login.style.display = 'none'
  register.style.display = 'block'
}
//点击去登录，让注册隐藏，登录显示
qdl.onclick = function() {
  login.style.display = 'block'
  register.style.display = 'none'
}

// 需求2：输入框验证
let ipt1 = document.querySelector('.register [name=username]')
let ipt2 = document.querySelector('.register [name=password]')
let ipt3 = document.querySelector('.login [name=username]')
let ipt4 = document.querySelector('.login [name=password]')

//封装输入框非空和正则的函数
function verifyInput(ele,txt1,reg,txt2) {
  //用户名密码校验,非空和正则
  ele.oninput = function() {
    // 非空判断
    if(this.value === '') {
      this.nextElementSibling.style.display = 'block'
      this.nextElementSibling.innerHTML = txt1
      return // 如果输入为空，就不需要正则校验
    }else {
      this.nextElementSibling.style.display = 'none'
      this.nextElementSibling.innerHTML = ''
    }
    // 正则校验
    if(reg.test(this.value)) {
      // 通过正则校验，就隐藏span
      this.nextElementSibling.style.display = 'none'
      this.nextElementSibling.innerHTML = ''
    }else {
      // 没有通过正则，就显示span，设置提示内容
      this.nextElementSibling.style.display = 'block'
      this.nextElementSibling.innerHTML = txt2
    }
  }
}
//调用input校验方法
verifyInput(ipt1,'用户名不能为空',/^\S{3,15}$/,'用户名必须在3~15位之间')
verifyInput(ipt2,'密码不能为空',/^\S{6,15}$/,'密码必须在6~15位之间')
verifyInput(ipt3,'用户名不能为空',/^\S{3,15}$/,'用户名必须在3~15位之间')
verifyInput(ipt4,'密码不能为空',/^\S{6,15}$/,'密码必须在6~15位之间')

//需求3：注册功能
let zc = document.querySelector('.register form')
zc.addEventListener('submit', function(e) {
  e.preventDefault()
  if(ipt1.value === '' || ipt2.value === '') {
    return toastr.warning('请输入用户名或密码')
  }
  // 发起ajax请求
  axios({
    method: 'post',
    url: '/api/register',
    data: {
      username: ipt1.value,
      password: ipt2.value
    }
  }).then(({data: res}) => {
    // console.log(res)
    //判断业务状态码是否失败
    // if(res.code === 1) {
    //   return toastr.error(res.message)
    // }
    //判断业务状态码是否成功
    if(res.code === 0 ) {
      toastr.success(res.message)
      //清空表单
      zc.reset()
      //跳转到登录
      qdl.click()
    }
  })
})

//需求4：登录功能
let dl = document.querySelector('.login form')
dl.addEventListener('submit', function(e) {
  e.preventDefault()
  if(ipt3.value === '' || ipt4.value === '') {
    return toastr.warning('请输入用户名或密码')
  }
  // 发起ajax
  axios({
    method: 'post',
    url: '/api/login',
    data: {
      username: ipt3.value,
      password: ipt4.value
    }
  }).then(({data: res}) => {
    // console.log(res)
    //判断业务状态码是否失败
    // if(res.code === 1) {
    //   return toastr.error(res.message)
    // }
    //判断业务状态码是否成功
    if(res.code === 0 ) {
      toastr.success(res.message)
      //跳转到首页，路径以html为准
      location.href = './index.html'
      //把token保存到本地
      localStorage.setItem('token', res.token)
    }
  })
})